<template name="businessInfo">
	<view class="indexC">
		<image :src="$isHttp(info.background)" class="response bgc" :class="{ bg: info.background === null }"></image>
		<z-paging ref="paging" v-model="CarList" fixed @query="queryList">
			<view slot="top" class="" style="background-color: rgba(0,0,0,0.4);">
				<cu-custom :isdw="true">
					<block slot="dw">
						<view class="flex" @click="BackPage"><text class=" text-bold text-gray cuIcon-home" style="font-size: 50rpx;"></text></view>
					</block>
					<block slot="content">
						<view class="text-white text-center text-bold">{{ info.store_name }}</view>
					</block>
				</cu-custom>
			</view>
			<view>
				<view class="center">
					<view class="flex margin-xs radius12 padding-sm" style="background-color: rgba(0,0,0,0.5);" @click="$goPage('/pageB/business/coupon?tabcur=3')">
						<!-- <image src="../../static/icon/yhq.png" style="width: 38rpx;height: 34rpx;" mode=""></image> -->
						<text class="lg text-white cuIcon-activityfill"></text><view class="text-sm text-white">点我，传说在福利中心可以得到你想要的东西哦！</view>
					</view>
					
					<swiper
						v-if="Carousel.length > 0"
						class="screen-swiper1 margin-xs radius18"
						:indicator-dots="true"
						:circular="true"
						:autoplay="true"
						interval="5000"
						duration="500"
					>
						<swiper-item v-for="(item, index) in Carousel" :key="index" style="position: relative;" @click="previewimage(index)">
							<image :src="$isHttp(item.picture)" mode="aspectFill" style="width: 100%;height: 100%;"></image>
							<video :src="$isHttp(item.picture)" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type == 'video'"></video>
						</swiper-item>
					</swiper>

					<view class="flex margin-xs justify-between align-center">
						<view class="text-df text-white text-bold margin-bottom-sm">
							<text class="cuIcon-titles text-orange"></text>
							热门剧本
						</view>
						<view class="text-white" @click="$goPageShock('./ScriptList')">
							更多
							<text class="lg text-gray cuIcon-right"></text>
						</view>
					</view>

					<ls-swiper
						:list="base_lsit"
						@clickItem="swiperClick"
						imgKey="picture"
						imgWidth="100%"
						:crown="true"
						:loop="true"
						:shadow="true"
						height="200"
						previousMargin="220"
						nextMargin="220"
						imgRadius="5"
					/>
					<view class="margin-xs radius padding-sm" style="background-color: rgba(0,0,0,0.5);">
						<view class="flex text-white" @click="phone">
							门店电话：
							<a>{{ info.telephone }}</a>
							<text class="lg margin-left-sm text-red cuIcon-dianhua"></text>
						</view>
						<view class="text-white" @click="map">门店地址：{{ info.address }}</view>
					</view>

					<view class="news  margin-xs" v-if="info.information != null">
						<view class="tp">最新情报</view>
						<view class="news1 radius">
							<van-notice-bar class="radius" color="#fff" backgroundColor="rgba(0,0,0,0.5)" :scrollable="true" :text="info.information" />
						</view>
					</view>
					
					
					<view class="margin-xs dm supporter radius padding-xs">
						<view class="text-df text-white text-bold margin-top-xs margin-bottom-sm">
							<text class="cuIcon-titles text-orange"></text>
							本店主持人
						</view>
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
							<view @click="$goPage('./hostInfo?id=' + item.id)" v-for="(item, index) in hostList" :key="index" class="cu-card dm-item scroll-view-item_H radius">
								<image :src="$isHttp(item.picture)" mode="aspectFill"></image>
								<view class="text">
									<!-- <view class="tj1 cu-tag radius sm text-white"><text
											class="lg text-white cuIcon-hot"></text>1234</view> -->
									<view class="text-sm text-black padding_le_10 text-cut margin-top-xs">{{ item.name }}</view>
									<view class="text-sm text-grey padding_le_10 text-cut margin-top-xs">开本场次：{{ item.presentCount }}</view>
								</view>
							</view>
						</scroll-view>
					</view>
					
					<view class="grarg">
						<view class="text-df text-white text-bold margin-top-xs margin-bottom-sm">
							<text class="cuIcon-titles text-orange"></text>
							本店在拼车
						</view>
						<view class="cu-card article bg-white radius12">
							<view
								@click="$goPage('../../pageB/script/AppointmentProgress?id=' + item.id)"
								class="itemCardui shadow padding-sm"
								v-for="(item, index) in CarList"
								:key="index"
							>
								<!-- <image src="../../static/icon/zd.png" class="zd" mode=""></image> -->
								<view class="flex justify-start">
									<image :src="$isHttp(item.picture)" lazy-load style="width: 210rpx;height: 290rpx;border-radius: 10rpx;" mode="aspectFill"></image>
									<view class=" margin-left-sm" style="width: 520rpx;">
										<view class="flex justify-start margin-top-xs">
											<view class="text-bold text-black">{{ item.name }}</view>
											<!-- <view class="cu-tag bg-yellow  sm round margin-left-sm">标签666</view> -->
										</view>
										<view class="margin-top-sm">
											<view
												v-for="(item1, index1) in item.smallclass"
												:key="index1"
												class="cu-tag sm round"
												style="background-color: #797979;color: #ffffff;"
												v-if="index1 < 6"
											>
												{{ item1.small_name }}
											</view>
										</view>
										<view class="margin-top-sm">
											<view class="cu-tag sm round">时间：{{ item.date }}【{{ item.week }}】{{ item.time }}</view>
										</view>
										<view class="margin-top-sm flex justify-start" style="color: #4a494c;">
											<view class="flex justify-start align-center">
												<text class="cuIcon-friendfill text-yellow"></text>
												<view class="text-sm margin-left-xs">{{ item.sex_type }}</view>
											</view>
											<view class="flex justify-start align-center margin-left-sm">
												<text class="cuIcon-timefill text-yellow"></text>
												<view class="text-sm margin-left-xs">{{ item.hour }}小时</view>
											</view>
											<view class="flex justify-start align-center margin-left-sm">
												<text class="cuIcon-selectionfill text-yellow"></text>
												<view class="text-sm margin-left-xs">{{ item.difficulty }}</view>
											</view>
										</view>
										<view class="flex justify-between  margin-top-sm">
											<view class="flex align-start" style="color: #4a494c;">
												<!-- <view class="text-sm">
													门店：
													<text style="text-decoration: underline" @click="$goPage('../business/info?id=' + item.storeId)">{{ item.storeName }}</text>
												</view> -->
											</view>
											<view class="cu-btn bg-yellow sm round">
												组队中
												<text class="">{{ item.Joincount }}/{{ item.people }}</text>
											</view>
										</view>
									</view>
								</view>
								<view v-if="item.remark != null && item.remark != ''">
									<view class="margin-top-sm text-black bg-white radius12 text-cut">
										<text class="cu-tag bg-red radius12">备注</text>
										<text class="padding-lr-xs">{{ item.remark }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<empty-view slot="empty"></empty-view>
		</z-paging>
	</view>
</template>

<script>
import lsSwiper from '../../components/ls-swiper/index.vue';
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
	import { shareMixins} from '@/common/mixins/share.js'
export default {
	//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
	mixins: [ZPagingMixin,shareMixins],
	name: 'businessInfo',
	components: {
		lsSwiper
	},
	data() {
		return {
			info: '', //门店详情
			cardCur: 0,
			base_lsit: [], //热门剧本列表
			hostList: [], //主持人列表
			Carousel: [],
			CarList: []
		};
	},
	onLoad(option) {
		this.$u.vuex('vuex_bussinessId', option.id);
		this.$u.vuex('vuex_bussinessEnter', 1);
		this.$u.api.getStoreInfoById({ store_id: option.id }).then(res => {
			this.info = res.data;
			this.$u.vuex('vuex_bussiness', res.data);
		});
		this.$u.api.getStorePlayList({ store_id: option.id, select: 1 }).then(res => {
			this.base_lsit = res.data;
		});
		this.$u.api.getStoreHostList({ id: option.id }).then(res => {
			this.hostList = res.data;
		});
		this.$u.api
			.getBusinessCarousel({
				storeId: option.id
			})
			.then(res => {
				this.Carousel = res.data;
			});
	},
	onHide() {
		console.log('onHide');
	},
	onUnload() {
		console.log('onUnload');
		this.$u.vuex('vuex_bussinessId', '');
		this.$u.vuex('vuex_bussinessEnter', 0);
		this.$u.vuex('vuex_bussiness', {});
	},
	methods: {
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			//模拟请求服务器获取分页数据，请替换成自己的网络请求
			this.$u.api
				.getBussinessPinList({
					storeId: this.vuex_bussinessId,
					select: 2,
					page: pageNo,
					number: pageSize
				})
				.then(res => {
					this.$refs.paging.complete(res.data.list);
				});
		},
		async map() {
			//地理编码，获取经纬度
			let re = await uni.request({
				//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
				url: 'https://restapi.amap.com/v3/geocode/geo?parameters?output=JSON&address=' + this.info.address + '&key=7b7fbe6751d2491c692a1728a6c7afa4'
			});
			let location = re[1].data.geocodes[0].location.split(',');
			await uni.openLocation({
				latitude: parseFloat(location[1]),
				longitude: parseFloat(location[0]),
				name: this.info.store_name,
				address: this.info.address,
				success: function() {
					console.log('success');
				}
			});
		},
		swiperClick(item) {
			this.$goPage('../../pageB/script/info?id=' + item.id);
		},
		phone() {
			uni.makePhoneCall({
				phoneNumber: this.info.telephone //仅为示例
			});
		},
		DotStyle(e) {
			this.dotStyle = e.detail.value;
		},
		previewimage(index) {
			let imgArry = [];
			for (let i = 0; i < this.Carousel.length; i++) {
				//如果当前
				if (this.Carousel[i].picture != '') {
					imgArry.push(this.$isHttp(this.Carousel[i].picture));
				}
			}
			uni.previewImage({
				current: index,
				urls: imgArry,
				indicator: 'number',
				loop: true,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		BackPage() {
			let canNavBack = getCurrentPages();
			if (canNavBack && canNavBack.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.switchTab({
					url: '/pages/home/home'
				})
			}
		}
	}
};
</script>

<style scoped lang="scss">
// 主持人
.supporter {
	background-color: rgba($color: #ffffff, $alpha: 0.1);
}

.padding_top_5 {
	padding-top: 5rpx;
}

.padding_le_10 {
	padding-left: 10rpx;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item_H {
	display: inline-block;
}

// DM推荐
.dm {
	width: auto;

	.dm-item {
		width: 240rpx;
		height: 420rpx;
		background-color: #fff;
		margin-left: 15rpx;
		overflow: hidden;

		&:nth-child(1) {
			margin-left: 0;
		}

		image {
			width: 100%;
			height: 75%;
		}

		.text {
			height: 25%;
			position: relative;

			.tj {
				height: 40rpx;
				width: 50%;
				border-radius: 0 100rpx 0 0;
				background-color: #fff;
				position: absolute;
				left: 0;
				top: -40rpx;
			}

			.tj1 {
				height: 30rpx;
				width: auto;
				border-radius: 10rpx;
				background-color: rgba($color: #939393, $alpha: 0.6);
				position: absolute;
				left: 10rpx;
				top: -60rpx;
			}
		}
	}
}

.screen-swiper2 {
	height: 160rpx;
	overflow: hidden;

	swiper-item {
		box-sizing: border-box;
	}
}

.screen-swiper2 image,
.screen-swiper2 video,
.swiper-item image,
.swiper-item video {
	width: 100rpx;
	display: block;
	height: 130rpx;
	margin: 0;
	pointer-events: none;
	border-radius: 10rpx;
}

// 最新情报
.news {
	position: relative;
	height: 80rpx;
	margin-top: 33rpx;

	.tp {
		width: 120rpx;
		height: 40rpx;
		background-color: #6c5341;
		color: #c2955a;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		border-radius: 15rpx 0 15rpx 0;
		position: absolute;
		top: -20rpx;
		left: 10rpx;
	}

	.news1 {
		overflow: hidden;
		// background-color: rgba($color: #000000, $alpha: 0.5);
	}
}

.Scriptlist {
	width: 340rpx;
	height: 350rpx;
	background-color: rgba($color: #fff, $alpha: 0.9);
	position: relative;

	.bg {
		width: 100%;
		height: 262rpx;
		position: absolute;
		bottom: 0;
		left: 0;
	}
}

.Scriptlist1 {
	width: 340rpx;
	height: 195rpx;
	background-color: rgba($color: #fff, $alpha: 0.9);
}

.Scriptlist2 {
	width: 340rpx;
	height: 145rpx;
	margin-top: 10rpx;
	background-color: rgba($color: #fff, $alpha: 0.9);
}

.center {
	height: auto;
	margin-top: 15rpx;
	padding: 0 20rpx;

	.screen-swiper1 {
		height: 300rpx;
		overflow: hidden;

		swiper-item {
			width: 100% !important;
		}

		.screen-swiper1 image,
		.screen-swiper1 video,
		.swiper-item1 image,
		.swiper-item1 video {
			// width: 100%;
			// display: block;
			// height: 100%;
			// margin: 0;
			// pointer-events: none;
		}
	}
}

.dwt {
	font-size: 28rpx;
	font-weight: 600;
	color: #fff;
}

.indexC {
	position: relative;
}

.page {
	height: 100vh;
}

.bgc {
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
}
.bg {
	background-color: #5f3d3d;
}
</style>
